import { genPageMetadata } from 'app/seo'
import Link from '@/components/Link'
import Hot from "./hot-articles"
import { GetWpBlogs } from './utils'
import Pagination from './Pagination'

export const metadata = genPageMetadata({ title: 'WordPress 博客' })
// 服务端获取数据
async function getWpData(page: number = 1) {
  try {
    const result = await GetWpBlogs(page, 10)
    return result
  } catch (error) {
    console.error('获取数据失败:', error)
    return {
      blogs: [],
      pagination: {
        currentPage: 1,
        totalPages: 0,
        hasNextPage: false,
        hasPrevPage: false,
      }
    }
  }
}

export default async function WpBlogPage({ searchParams }: { searchParams: Promise<{ page?: string }> }) {
  const params = await searchParams
  const currentPage = parseInt(params.page || '1', 10)
  const { blogs, pagination } = await getWpData(currentPage)

  return (
    <div className="divide-y divide-gray-200 dark:divide-gray-700">
      <div className="space-y-2 md:space-y-5 py-1">
        <h3 className="font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-5 md:text-2xl md:leading-8">
        <Link
          href={`https://word.huixiangwuyou.com/`}
          className="hover:text-primary-600 dark:hover:text-primary-400 font-medium"
        >
          WordPress 博客
          </Link>
        </h3>
        <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
          基于 WordPress 动态数据博客
        </p>
      </div>
      
      <div className="container py-2">
       <div className='flex flex-col md:flex-row'>
        <div className="w-full md:w-13/20">
          {blogs && blogs.length > 0 ? (
            blogs.map((blog: any) => (
              <div key={blog.ID} className="p-4">
                <div className="h-full overflow-hidden rounded-md border-gray-200 border-opacity-60 dark:border-gray-700">
                  <div className="px-6 py-3">
                    <h4 className="mb-3 text-base font-bold leading-8 tracking-tight">
                      <Link
                        href={`/wp/article?id=${blog.ID}`}
                        className="text-gray-700 dark:text-gray-100 hover:text-primary-600 dark:hover:text-primary-400"
                      >
                        {blog.post_title}
                      </Link>
                    </h4>
                    <p className="prose mb-3 max-w-none text-gray-500 dark:text-gray-400">
                      {blog.post_excerpt}
                    </p>
                    <div className="flex flex-wrap justify-between">
                      <time className="text-sm text-gray-500 dark:text-gray-400">
                        {new Date(blog.post_date_gmt).toLocaleDateString('zh-CN')}
                      </time>
                      <Link
                        href={`/wp/article?id=${blog.ID}`}
                        className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 text-sm font-medium"
                      >
                        阅读更多 →
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className="p-4 text-center text-gray-500 dark:text-gray-400">
              暂无博客文章
            </div>
          )}
        </div>
        <div className="hidden md:block md:w-7/20">
         <Hot />  
        </div>
       </div>
        
        {/* 分页组件 */}
        <Pagination 
          currentPage={pagination.currentPage}
          totalPages={pagination.totalPages}
          hasNextPage={pagination.hasNextPage}
          hasPrevPage={pagination.hasPrevPage}
        />
      </div>
    </div>
  )
}